<template>

    <!-- 添加按钮 -->
    <div class="add-box">
        <div class="left">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
        <el-button class="btn" @click="addshowFn">添加</el-button>
    </div>

    <!-- 表格 -->
    <div>
        <el-table border ref="multipleTableRef" :data="tableData" style="width: 100%">
            <!-- <el-table-column type="selection" />    -->
            <el-table-column prop="id" label="编号">
            </el-table-column>
            <el-table-column label="商品名称">
                <template #default="scope">
                    {{ scope.row.product.name }}
                </template>
            </el-table-column>
            <el-table-column label="货号">
                <template #default="scope">
                    No.{{ scope.row.product.productSn }}
                </template>
            </el-table-column>
            <el-table-column label="商品价格">
                <template #default="scope">
                    ￥{{ scope.row.product.price }}
                </template>
            </el-table-column>
            <el-table-column label="剩余数量">
                <template #default="scope">
                    {{ scope.row.product.stock }}
                </template>
            </el-table-column>
            <el-table-column label="秒杀价格">
                <template #default="scope">
                    {{ scope.row.flashPromotionPrice }}
                </template>
            </el-table-column>
            <el-table-column label="秒杀数量">
                <template #default="scope">
                    {{ scope.row.flashPromotionCount }}
                </template>
            </el-table-column>
            <el-table-column label="限购数量">
                <template #default="scope">
                    {{ scope.row.flashPromotionLimit }}
                </template>
            </el-table-column>
            <el-table-column label="排序"></el-table-column>
            <el-table-column property="Address" label="操作">
                <template #default="scope">
                    <el-button type="primary" text size="small" @click="handelShow(scope.row.id)">编辑</el-button>
                    <el-button type="primary" text size="small" @click="delectFn(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <ElConfigProvider :locale="zhCn">
        <el-pagination v-model:currentPage="listParams.pageNum" v-model:page-size="listParams.pageSize" background
            layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChange"
            @current-change="pageNumChange" :page-sizes="[5, 10, 20]" />
    </ElConfigProvider>
    <miaosha :show="addshow" @hide="hideshow" @refach="refach" />
    <flashset :show="setshow" :shopid="shopid" />
</template>

<script setup lang="ts">
import { user } from "@/api";
import zhCn from "element-plus/lib/locale/lang/zh-cn";

import { FormInstance } from "element-plus";
import { reactive, ref, toRefs } from "vue";
import miaosha from "./components/miaosha.vue"
import flashset from "./components/flashset.vue"
import { useRoute } from "vue-router"
const route = useRoute()
// const flashPromotionId = Number(route.query.flashPromotionId)
// const flashPromotionSessionId = Number(route.query.flashPromotionSessionId)
const searchFormRef = ref<FormInstance>();
interface IState {
    tableData: Iproduct[]
    listParams: getShop,
    total: number,


}

const state = reactive<IState>({
    tableData: [],
    listParams: {
        pageNum: 1,
        pageSize: 5,
        flashPromotionId: Number(route.query.flashPromotionId),
        flashPromotionSessionId: Number(route.query.flashPromotionSessionId)
    },
    total: 0,
    //点击传的id

})

const getlist = () => {
    user.getShopApi(state.listParams).then(res => {
        if (res.code === 200) {
            state.tableData = res.data.list
            console.log(state.tableData);
            state.total = res.data.total
        }
    })
}
getlist()

//控制添加会话框显示隐藏
const addshow = ref(false)

//点击添加
const addshowFn = () => {
    addshow.value = true
}

//控制编辑会话框显示隐藏
const setshow = ref(false)


//分页功能
const pageSizeChange = () => {
    getlist()
}
const pageNumChange = () => {
    getlist()
}


const shopid = ref(0)

//编辑功能
const handelShow = (id: number) => {
    shopid.value = id
    console.log(shopid.value);
    setshow.value = true

}

//删除

const delectFn = (id: number) => {

}

//专门用来添加完或者点击取消刷新页面
const refach = () => {
    getlist()
}

//秒杀列表添加弹窗 点击取消关闭
const hideshow = () => {
    addshow.value = false
    refach()
}

let { tableData, listParams, total } = toRefs(state)
</script>

<style lang="less" scoped>
.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin: 20px 0;
    border: 1px solid #eee;


    .left {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .el-icon {
            margin-right: 10px;
        }

    }
}
</style>